<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebClip 生成器</title>
    <style>
        body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}
#qrcode_wrapper {
    text-align: center;
}
#qrcode_down {
    color: blue;
    cursor: pointer;
}
h1 {
    font-size: 24px;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #333;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}

input[type="url"],
input[type="text"],
input[type="file"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

button {
    width: 100%;
    padding: 0.75rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>WebClip 生成器</h1>
        <form id="webclipForm" action="/webclip/generate" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="url">网页 URL:</label>
                <input type="url" id="url" name="url" required placeholder="https://www.example.com">
            </div>
            <div class="form-group">
                <label for="label">名称:</label>
                <input type="text" id="label" name="label" required placeholder="Example WebClip">
            </div>
            <div class="form-group">
                <label for="label">简介:</label>
                <input type="text" id="desc" name="desc" required placeholder="WebClip description">
            </div>
            <div class="form-group">
                <label for="icon">图标文件 (PNG):</label>
                <input type="file" id="icon" name="icon" accept=".png">
            </div>
            <button type="submit">立即生成</button>
            
        </form>
        <div id="responseMessage"></div>
        <div id="qrcode_wrapper">
            <img id="qrcode"/>
            <a id="qrcode_down">下载</a>
        </div>
    </div>
</body>
<script>
    document.querySelector("#qrcode_wrapper").style.display = "none"
    document.getElementById('webclipForm').addEventListener('submit', async function (event) {
            // 阻止表单默认提交行为
            event.preventDefault();

            // 创建 FormData 对象，用于收集表单数据
            const formData = new FormData(this);

            try {
                // 使用 fetch API 发送 POST 请求到接口
                const response = await fetch('/webclip/generate', {
                    method: 'POST',
                    body: formData
                });

                // 检查响应状态
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // 解析响应数据
                const data = await response.json();
                console.log(data)
                
                // 处理接口返回的数据
                const responseMessage = document.getElementById('responseMessage');
                if (data.code==200) {
                    document.querySelector("#qrcode_wrapper").style.display = "block"
                    responseMessage.textContent = "请使用相机扫码安装(不要用微信)";
                    document.querySelector("#qrcode").src = data.data.img
                    document.querySelector("#qrcode_down").href = data.data.url
                } else {
                    responseMessage.textContent = '接口返回数据格式不正确';
                }
            } catch (error) {
                // 处理错误
                const responseMessage = document.getElementById('responseMessage');
                responseMessage.textContent = `请求出错: ${error.message}`;
            }
        });
</script>
</html>